<template>
  <div>
    <div class="box">
      <!-- 头部form表单 -->
      <el-form
        size="medium "
        :inline="true"
        :model="queryObj"
        class="demo-form-inline form_top"
      >
        <el-form-item
          label="区域搜索:"
          extra
          style="font-size: 16px; font-weight: 400"
        >
          <el-input v-model="queryObj.name" placeholder="请输入" clearable @clear="clear" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            class="formbutton"
            @click="onSubmit"
          >查询</el-button>
        </el-form-item>
      </el-form>
      <!-- form表单下按钮 -->
      <div class="button_top">
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          class="formbutton buttonbodytop"
          @click="addArea('add')"
        >新建</el-button>
        <!-- table表格 -->
        <el-table
          style="width: 100%"
          class="table_top"
          :data="listData.currentPageRecords"
          :header-cell-style="{ backgroundColor: '#f3f6fb', fontweight: 400 }"
        >
          <el-table-column
            label="序号"
            width="80px"
            type="index"
            :index="indexMethod"
          />
          <el-table-column
            label="区域名称"
            align="center"
            prop="name"
          />
          <el-table-column label="点位数" align="center" prop="nodeCount" />
          <el-table-column label="备注说明" align="center" prop="remark" />
          <el-table-column label="操作" align="center">
            <template #default="{row}">
              <el-button
                type="text"
                class="button_table_foot"
                @click="viewDetails(row.id,row.name)"
              >查看详情</el-button>
              <el-button type="text" class="button_table_foot" @click="modifyArea(row.id,'edit')">修改</el-button>
              <el-button
                type="text"
                class="button_table_foot remove"
                @click="dellist(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="foot">
          <p>共{{ listData.totalCount }}条记录 第{{ listData.pageIndex }} /{{ listData.totalPage }} 页</p>
          <div class="foot_button">
            <el-button
              type="primary"
              plain
              :class="{'foot_button_top':true,'isgrey':queryObj.pageIndex===1}"
              :disabled="queryObj.pageIndex===1?true:false"
              @click="previous"
            >上一页</el-button>
            <el-button
              type="success"
              plain
              class="foot_button_foot"
              :class="{'foot_button_top':true,'isgrey':queryObj.pageIndex===Number(listData.totalPage)}"
              :disabled="queryObj.pageIndex===Number(listData.totalPage)?true:false"
              @click="nextPage"
            >下一页</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增弹窗 -->
    <el-dialog
      :title="type==='add'?'新增区域':'修改区域'"
      :visible.sync="dialogVisible"
      width="40%"
      class="dialog"
    >
      <!-- 弹窗from表单 -->
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="区域名称:" prop="regionName">
          <el-input v-model="ruleForm.regionName" placeholder="请输入" maxlength="15" show-word-limit class="inp" />
        </el-form-item>
        <el-form-item label="备注说明:" prop="remark">
          <el-input
            v-model="ruleForm.remark"
            :rows="4"
            type="textarea"
            placeholder="请输入备注(不超过40字)"
            maxlength="40"
            show-word-limit
            class="inp"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="dialogqv" @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          class="dialogqve"
          @click="increased"
        >确 定</el-button>
      </span>
    </el-dialog>

    <!-- 区域详情弹窗 -->
    <el-dialog
      title="区域详情"
      :visible.sync="isdialogVisible"
      width="40%"
      class="dialog"
    >
      <div class="boxbox">
        <!-- p标签 -->
        <div class="p_top">
          <p>区域名称：</p>
          <p class="p_body">{{ name }}</p>
        </div>
        <!-- 详情table -->
        <div class="p_foot">
          <p>包含点位:</p>
          <el-table
            :data="currentPageRecords"
            style="width:50%"
            class="pp_tb"
            :header-cell-style="{ backgroundColor: '#f3f6fb'}"
          >
            <el-table-column
              prop="date"
              label="序号"
              width="130px"
              type="index"
            />
            <el-table-column
              prop="name"
              label="点位名称"
              width="130px"
            />
            <el-table-column
              prop="vmCount"
              label="设备数量"
              width="130px"
            />
          </el-table>
        </div>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import { getRender, addlist, removelist, edit, modifyName, details } from '@/api/PointPosition'
export default {
  name: 'Tektor',
  components: {},
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      queryObj: {
        pageIndex: 1,
        pageSize: 10,
        name: null
      },
      id: null,
      ruleForm: {
        regionName: null,
        remark: null
      },
      rules: {
        regionName: [
          { required: true, message: '请输入区域名称', trigger: 'blur' },
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入备注', trigger: 'change' },
          { min: 1, max: 40, message: '长度在 1 到 40 个字符', trigger: 'blur' }
        ]

      },
      listData: {}, //  渲染数据
      type: null,
      dialogVisible: false, // 新增修改弹窗
      isdialogVisible: false, // 区域详情弹窗
      currentPageRecords: null,
      name: null
    }
  },
  created() {
    this.render()
  },
  methods: {
  // 获取渲染列表
    async render() {
      const data = await getRender(this.queryObj)
      console.log(data)
      this.listData = data
    },
    // 下一页
    nextPage() {
      this.queryObj.pageIndex += 1
      this.render()
      console.log(this.listData)
    },
    // 上一页
    previous() {
      this.queryObj.pageIndex -= 1
      this.render()
    },
    // 序号
    indexMethod(index) {
      return (this.queryObj.pageIndex - 1) * 10 + (index + 1)
    },
    // 查询
    onSubmit() {
      this.render()
    },
    clear() {
      this.queryObj.name = null
      this.render()
    },
    // 新建
    addArea(type) {
      this.dialogVisible = true
      this.type = type
    },
    // 新增修改
    async increased() {
      if (this.type === 'add') {
        try {
          await this.$refs.ruleForm.validate()
          await addlist(this.ruleForm)
          this.dialogVisible = false
          this.$message({
            message: '新增成功',
            type: 'success',
            offset: 100
          })
          this.ruleForm = {
            regionName: null,
            remark: null
          }
          this.$refs.ruleForm.resetFields()
        } catch (error) {
          console.log(error)
        }
      }
      if (this.type === 'edit') {
        try {
          await this.$refs.ruleForm.validate()
          await modifyName({ id: this.id, ...this.ruleForm })
          this.render()
          this.dialogVisible = false
          this.$message({
            message: '修改成功',
            type: 'success',
            offset: 100
          })
          this.ruleForm = {
            regionName: null,
            remark: null
          }
          this.$refs.ruleForm.resetFields()
        } catch (error) {
          console.log(error)
        }
      }
    },
    // 修改
    async modifyArea(id, type) {
      this.id = id
      this.type = type
      const data = await edit(id)
      this.ruleForm = {
        regionName: data.name,
        remark: data.remark
      }
      this.dialogVisible = true
      // console.log(data)
    },
    // 删除
    async dellist(id) {
      try {
        await removelist({ id })
        this.$message({
          message: '删除成功',
          type: 'success',
          offset: 100
        })
        this.render()
      } catch (error) {
        // console.log(error)
        this.$message({
          message: '初始数据不能删除',
          type: 'warning',
          offset: 100
        })
      }
    },
    // 查看详情
    async viewDetails(id, name) {
      const data = await details({ regionId: id, ...this.queryObj })
      console.log(data)
      this.currentPageRecords = data.currentPageRecords
      this.name = name
      this.isdialogVisible = true
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-table td, .el-table th.is-leaf {
  border-bottom: none;
}
.boxbox {
  padding-left: 50px;
  font-weight: normal;
  color: #898a8d;
}
::v-deep .cell {
  font-weight: normal;
  color: #6a6a6a;
}
.p_top {
  display: flex;
}
.p_foot {
   display: flex;
}
.pp_tb {
   margin-left: 10px;
}
.p_body {
   margin-left: 10px;
}

.isgrey {
  background-color: #edf0f9 !important;
  color: #d8dde6 !important;
}
 ::v-deep .el-dialog__footer {
  text-align: center;
 }
 .dialog {
  font-weight: 800;
 }
 .inp {
  width: 400px;
 }
  .dialogqv {
  background-color: #f3e7e1;
  border: 0px;
 }
 .dialogqve {
  background-color: #f56931;
   border: 0px;
 }
  ::v-deep .el-form-item__label {
  font-weight: normal;
 }
.box {
  ::v-deep .el-form-item__label {
    font-weight: normal;
  }
  ::v-deep .el-table th > .cell {
    font-weight: normal;
    color: #666666;
  }
  .remove {
    color: #ed446e !important ;
  }

  margin: 20px 15px 0 15px;
  .demo-form-inline.form_top {
    height: 60px;
    background-color: #fff;
    padding-top: 11px;
     padding-left: 16px;
    .formbutton {
      background-color: #5f84ff;
    }
  }
  .button_top {
    margin-top: 15px;
    background-color: #fff;
    padding-left: 15px;
    padding-top: 15px;
    margin-bottom: 15px;
    .buttonbodytop {
      border: 0px;
      background-color: #ff883a;
    }
    .buttonbodyfoot {
      border: 0px;
      background-color: #fbf4f0;
      color: #655b56;
    }
    .table_top {
      margin-top: 15px;
      .button_table_foot {
        color: #5f84ff;
      }
    }
    .foot {
      display: flex;
      justify-content: space-between;

      margin-top: 40px;
      padding-left: 15px;
      padding-right: 15px;
      padding-bottom: 30px;
      p {
        color: #dbdfe5;
      }
      .foot_button {
        height: 30px;
        line-height: 30px;
        .foot_button_top {
          margin-right: 15px;
          border: 0px;
          background-color: #d5ddf8;
          color: #606266;
        }
        .foot_button_foot {
          border: 0px;
          background-color: #d5ddf8;
          color: #606266;
        }
      }
    }
  }
}
</style>
